<template>
  <div id="base">
   
    
    
   
	<daohang :list='list'></daohang>
	 <div>---------------------------------组件三步走-----------------------------------</div>
	<div>{{message}}</div>
	<div>{{data1}}</div>
	父组件：<input type="text" v-model="data1"> 
	<first-child-component :data1.sync=data1 v-on:listenChildEvent="showMessFromChild" ></first-child-component>
  
    <selectCom :sdata='sdata' @select-type="onSelectType"></selectCom>
	
  <table1 :tab1='tab1'></table1>
  </div>

</template>
 
<script>
import Vue from 'vue';
import vueleftData from '../../../daohang/chart-options/vueleftData';
import daohang from '../../../daohang/shuxing.vue';
import firstChildComponent from './firstChildComponent.vue';
import selectData from '../../../daohang/chart-options/selectData';
import selectCom from './select.vue';
import table1 from    '../../table/table1.vue';
import tableData1 from    '../../table/tableData1';  

export default {
  name: 'base',
  data(){
  let list=vueleftData.data.list;
  let sdata=selectData.data.list;
  let tab1=tableData1.data.list;
  console.log(tab1);
  return{message:'this is parent Component',
   data1:"from parent",
   list:list,
   sdata:sdata,
   tab1
   } 
  },
  methods:{
  showMessFromChild:function(data){
  console.log("hello"+data);
  },
  onSelectType:function(type){
    console.log('ni xuan ze '+ type);
	if(type=='tree'){
	 this.$router.push('/vue');
	}else if(type=='table'){
	 //this.$router.push('/vue');
	}else if(type=='daohang'){
	 this.$router.push('/vue');
	}
  } 
  },
  components: {
    daohang,
	firstChildComponent,
	selectCom,
	table1
  }
  
}
</script>
 
<style>
#test {
  width: 400px;
  height: 400px;
  margin: 40px auto;
}
.base{
float:left;

}
</style>